<template>
    <div class="container">
        <Breadcrumb :items="['menu.biz', 'menu.biz.ticket']" />
        <a-card :title="$t('menu.biz.ticket')">

            <a-space fill direction="vertical">
                <a-row :gutter="16">
                    <a-col :flex="1">
                        <a-space align="end" style="justify-content: flex-end;" fill>
                            <a-button shape="circle" @click="fetchData">
                                <template #icon><icon-refresh /></template>
                            </a-button>
                        </a-space>
                    </a-col>
                </a-row>

                <!-- 搜索区域 -->
                <a-card :bordered="false" size="small">
                    <a-form :model="searchForm" layout="inline">
                        <a-form-item field="search" label="关键词搜索">
                            <a-input v-model="searchForm.search" placeholder="核销码/手机号/商品名称/商家名称" allow-clear />
                        </a-form-item>
                        <a-form-item field="phone" label="手机号">
                            <a-input v-model="searchForm.phone" placeholder="请输入手机号" allow-clear />
                        </a-form-item>
                        <a-form-item field="goods_name" label="商品名称">
                            <a-input v-model="searchForm.goods_name" placeholder="请输入商品名称" allow-clear />
                        </a-form-item>
                        <a-form-item field="status" label="状态">
                            <a-select v-model="searchForm.status" placeholder="请选择状态" allow-clear>
                                <a-option :value="0">未使用</a-option>
                                <a-option :value="1">已使用</a-option>
                                <a-option :value="2">已过期</a-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item>
                            <a-space>
                                <a-button type="primary" @click="handleSearch">
                                    <template #icon><icon-search /></template>
                                    搜索
                                </a-button>
                                <a-button @click="handleReset">
                                    <template #icon><icon-refresh /></template>
                                    重置
                                </a-button>
                            </a-space>
                        </a-form-item>
                    </a-form>
                </a-card>

                <a-table :data="renderData" :loading="loading" :bordered="{ cell: true }" :pagination="pagination"
                    @page-change="onPageChange" @page-size-change="onPageSizeChange">
                    <template #columns>
                        <a-table-column title="ID" data-index="id" :width="80" />
                        <a-table-column title="核销码" data-index="code" :width="120" />
                        <a-table-column title="手机号" data-index="phone" :width="120" />
                        <a-table-column title="商品名称" data-index="goods_name" />
                        <a-table-column title="商家名称" data-index="biz_name" :width="150" />
                        <a-table-column title="状态" data-index="status" :width="100">
                            <template #cell="{ record }">
                                <a-tag :color="getStatusColor(record.status)">
                                    {{ record.status_text }}
                                </a-tag>
                            </template>
                        </a-table-column>
                        <a-table-column title="使用时间" data-index="used_at" :width="180" />
                        <a-table-column title="创建时间" data-index="created_at" :width="180" />
                        <a-table-column title="操作" align="center" :width="120">
                            <template #cell="{ record }">
                                <a-space size="mini">
                                    <a-link v-if="record.status === 0" @click="handleUse(record)">
                                        核销
                                    </a-link>
                                    <a-popconfirm position="left" content="确定要删除这个核销码吗？" @ok="handleDelete(record.id)">
                                        <a-link>
                                            删除
                                        </a-link>
                                    </a-popconfirm>
                                </a-space>
                            </template>
                        </a-table-column>
                    </template>
                </a-table>
            </a-space>
        </a-card>


    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { queryBizTicketList, delBizTicket, useBizTicket, BizTicketRecord } from '@/api/bizTicket';

const { loading, setLoading } = useLoading(true);

const basePagination = {
    current: 1,
    pageSize: 10,
    total: 0,
};

const pagination = reactive({
    ...basePagination,
});

// 搜索表单
const searchForm = reactive({
    search: '',
    phone: '',
    goods_name: '',
    status: undefined as number | undefined,
});



const renderData = ref<BizTicketRecord[]>([]);

const fetchData = async () => {
    setLoading(true);
    try {
        const { data } = await queryBizTicketList({
            current: pagination.current,
            pageSize: pagination.pageSize,
            ...searchForm,
        });
        renderData.value = data.list;
        pagination.total = data.total;
    } catch (err) {
        Message.error('获取核销码列表失败');
    } finally {
        setLoading(false);
    }
};

const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
};

const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.current = 1;
    fetchData();
};

const handleSearch = () => {
    pagination.current = 1;
    fetchData();
};

const handleReset = () => {
    Object.assign(searchForm, {
        search: '',
        phone: '',
        goods_name: '',
        status: undefined,
    });
    pagination.current = 1;
    fetchData();
};

const handleDelete = async (id: number) => {
    try {
        await delBizTicket(id);
        Message.success('删除成功');
        fetchData();
    } catch (err) {
        Message.error('删除失败');
    }
};

const handleUse = async (record: BizTicketRecord) => {
    try {
        await useBizTicket({ id: record.id });
        Message.success('核销成功');
        fetchData();
    } catch (err) {
        Message.error('核销失败');
    }
};

const getStatusColor = (status: number) => {
    const colorMap: Record<number, string> = {
        0: 'blue',
        1: 'green',
        2: 'red'
    };
    return colorMap[status] || 'default';
};

onMounted(() => {
    fetchData();
});
</script>

<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;
}
</style>

<script lang="ts">
export default {
    name: 'BizTicket',
};
</script>
